App Bar

和 bootstrap 的 .navbar 做的是一樣的，當然也可以透過其他方式寫，官方文件中會應用到 toolbar 的組件，在預設的情況就只是一個 dispalay="flex" 的 div，而 app bar 作為外層預設的情況為 position="fixed":

<AppBar position="static">
  <Toolbar>
    <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
      <MenuIcon />
    </IconButton>
    <Typography variant="h6" className={classes.title}>
      News
    </Typography>
    <Button color="inherit">Login</Button>
  </Toolbar>
</AppBar>

另外官網有提供加入搜尋欄位的作法，這裡我就不再示範了，因 為其實這邊的作法不一定要參照他的方法，如果只是塞 input + 搜尋按鈕，用不著用 InputBase，直接用原生 input tag + makeStyle 改寫就可以了。
也可以結合前面的 menu 來做 navbar 上面的下拉選單。

// in export function
// 這裡為了示範登入和未登入的狀態而寫，但正常因由後端給的 data 帶入判定
const [auth, setAuth] = React.useState(true);
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);

const handleChange = (event) => {
  setAuth(event.target.checked);
};

const handleMenu = (event) => {
  setAnchorEl(event.currentTarget);
};

const handleClose = () => {
  setAnchorEl(null);
};

// in return
<div className={classes.root}>
  <FormGroup>
    <FormControlLabel
      control={<Switch checked={auth} onChange={handleChange} aria-label="login switch" />}
      label={auth ? 'Logout' : 'Login'}
    />
  </FormGroup>
  <AppBar position="static">
    <Toolbar>
      <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
        <MenuIcon />
      </IconButton>
      <Typography variant="h6" className={classes.title}>
        Photos
      </Typography>
      {auth && (
        <div>
          <IconButton
            aria-label="account of current user"
            aria-controls="menu-appbar"
            aria-haspopup="true"
            onClick={handleMenu}
            color="inherit"
          >
            <AccountCircle />
          </IconButton>
          <Menu
            id="menu-appbar"
            anchorEl={anchorEl}
            anchorOrigin={{
              vertical: 'top',
              horizontal: 'right',
            }}
            keepMounted
            transformOrigin={{
              vertical: 'top',
              horizontal: 'right',
            }}
            open={open}
            onClose={handleClose}
          >
            <MenuItem onClick={handleClose}>Profile</MenuItem>
            <MenuItem onClick={handleClose}>My account</MenuItem>
          </Menu>
        </div>
      )}
    </Toolbar>
  </AppBar>
</div>

Toolbar 的 variant="dense" 只有在桌面模式下才會有用。

Scrolling 滾動

這裡會用到 useScrollTrigger()

import useScrollTrigger from '@material-ui/core/useScrollTrigger';

隱藏應用欄

向下滾動會隱藏應用欄，這樣一來會留有更多的空間進行閱讀。

// in export function
const trigger = useScrollTrigger(false);

<div>
  <Slide appear={false} direction="down" in={!trigger}>
    <AppBar>
      <Toolbar>
        首頁
      </Toolbar>
    </AppBar>
  </Slide>
  <div style={{height: '125vh',maginTop: '5rem'}}>
    內容
  </div>
</div>

也可以用這個方法來做置頂按鈕，詳細範例。

那麼今天的講解就到這邊，有了這些概念就能整合明天要講解的 Drawer 組件了。